<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/echarts.js"></script>
		<script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>
		<script type="text/javascript" src="../js/vue.js"></script>
		<script type="text/javascript" src="../js/vue-resource.js"></script>
		<script type="text/javascript" src="../layui/layui.js"></script>
		<link rel="stylesheet" href="../layui/css/layui.css" />
		<link rel="stylesheet" href="../css/my/alertSet.css" />
	</head>

	<body>
		<div id="alertV" class="layui-form">
			<div class="layui-form-item">
				<label class="layui-form-label">湿度上限%：</label>
				<div class="layui-input-block alertInput">
					<input type="number" readonly="readonly" v-model="temUp" required lay-verify="required" autocomplete="off" class="layui-input alertSet">
					<button class="layui-btn alertUp">修改</button>
					<button class="layui-btn alertKeep" v-on:click="updateAlert()">保存</button>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">温度上限℃：</label>
				<div class="layui-input-block alertInput">
					<input type="number" readonly="readonly" v-model="humUp" required lay-verify="required" autocomplete="off" class="layui-input alertSet">
					<button class="layui-btn alertUp">修改</button>
					<button class="layui-btn alertKeep" v-on:click="updateAlert()">保存</button>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">湿度下限%：</label>
				<div class="layui-input-block alertInput">
					<input type="number" readonly="readonly" v-model="temLw" required lay-verify="required" autocomplete="off" class="layui-input alertSet">
					<button class="layui-btn alertUp">修改</button>
					<button class="layui-btn alertKeep" v-on:click="updateAlert()">保存</button>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">温度下限℃：</label>
				<div class="layui-input-block alertInput">
					<input type="number" readonly="readonly" v-model="humLw" required lay-verify="required" autocomplete="off" class="layui-input alertSet">
					<button class="layui-btn alertUp">修改</button>
					<button class="layui-btn alertKeep" v-on:click="updateAlert()">保存</button>
				</div>
			</div>
		</div>
	</body>

	<script>
		var alertV = new Vue({
			el: '#alertV',
			data: {
				temUp: 0,
				humUp: 0,
				temLw: 0,
				humLw: 0,
				upperId: 0
			},
			methods: {
				getAlert: function() {
					this.$http.get('http://localhost:8080/temperatureController/getTemper').then(function(res) {
						console.log(res.body);
							alertV.temUp = res.body.temUpper;
							alertV.humUp = res.body.humUpper;
							alertV.temLw = res.body.temLower;
							alertV.humLw = res.body.humLower;
							alertV.upperId = res.body.upperId;
					}, function() {
						console.log('请求失败处理');
					});
				},
				updateAlert:function(){
					console.log("temUp:"+alertV.temUp+"/"+"humUp:"+alertV.humUp+"/"+"temLw:"+alertV.temLw+"/"+"humLw:"+alertV.humLw+"/")
					this.$http.post('http://localhost:8080/temperatureController/editTemper', {
						temUpper: alertV.temUp,
						humUpper: alertV.humUp,
						temLower: alertV.temLw,
						humLower: alertV.humLw,
						upperId :alertV.upperId
					}, {
						emulateJSON: true
					}).then(function(res) {
						console.log(res.body);
						alertV.getAlert();
						if(res.body == 1) {
							layer.alert('ok', {
								icon: 1
							});
							
						} else {
							layer.alert('no', {
								icon: 5
							});
						}
					}, function(res) {
						console.log(res.status);
					});
				}
			}
		})

		//渲染form
		layui.use('form', function() {
			var form = layui.form;
			form.render();
			//监听提交
			form.on('submit(formDemo)', function(data) {
				layer.msg(JSON.stringify(data.field));
				return false;
			});
		});

		$(".alertUp").on("click", function() {
			$(this).prev().attr("readonly", false);
			$(this).css("display", "none");
			$(this).next(".alertKeep").css("display", "block");
		});
		$(".alertKeep").on("click", function() {
			$(this).prev().prev().attr("readonly", true);
			$(this).css("display", "none");
			$(this).prev().css("display", "block");			
		});

		$(document).ready(function() {
			alertV.getAlert();
		});
	</script>

</html>